<template>
  <div class="box">
    <!-- <header class="header">
      <van-nav-bar
        @click-left="$router.go(-1)"
        left-arrow
        height="100%"
      >
        <van-icon slot="right" name="weapp-nav"/>
      </van-nav-bar>
    </header> -->
    <div class="content">
      <div class="detailBanner">
        <img :src="proimg" alt="" style="width:100%;">
        <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_arrow_left_circle_gray.png" alt="back" @click="$router.go(-1)" class="goBack">
        <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_more_solidgray3.png" alt="more" class="more">
      </div>
      <div class="detailBox">
        <div class="price">
          <h3>￥{{ price }}</h3>
          <span>￥ {{ oldprice }}</span>
        </div>
        <h1>{{ proname }}</h1>
        <i>{{ desc }}</i>
      </div>
      <img src="https://img.youpin.mi-img.com/editor1/ce497b9d0341ac785d77e343dddab7e7.png?w=1080&h=111" alt="" width="100%" style="margin:10px 0;">
      <img src="https://img.youpin.mi-img.com/yingkebao/bb3126d942f5dc534864112ac11b4705.png?w=1080&h=120" alt="" width="100%" style="margin:5px 0;">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" @click="chat" text="客服" color="#07c160" />
        <van-goods-action-icon v-if="$store.state.users.login_state" icon="cart-o" @click="$router.push('/cart')" text="购物车" :badge="$store.getters['cart/totalNum']" />
        <van-goods-action-icon v-else icon="cart-o" @click="$router.push('/cart')" text="购物车" />
        <van-goods-action-icon :icon="collecticon" @click="collect" :text="collecticon === 'star-o' ? '收藏' : '已收藏'" color="#ff5000" />
        <van-goods-action-button @click="addCart" type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getDetailData, addCart } from '@/api'
import { Image, NavBar, Toast, Icon, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
Vue.use(Image)
Vue.use(NavBar)
Vue.use(Toast)
Vue.use(Icon)
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
export default {
  data () {
    return {
      brand: '',
      desc: '',
      detail: '',
      price: 0,
      oldprice: 0,
      proid: '',
      proimg: '',
      proname: '',
      rating: 0,
      sales: 0,
      stock: 0,
      type: '',
      collecticon: 'star-o'
    }
  },
  mounted () {
    console.log(this.$route.params)
    const { proid } = this.$route.params
    this.proid = proid
    const arrStr = localStorage.getItem('collection') || '[]'
    const arr = JSON.parse(arrStr)
    const index = arr.indexOf(this.proid)
    if (index !== -1) {
      console.log('收藏夹有数据')
      this.collecticon = 'star'
    } else {
      console.log('收藏夹无数据')
      this.collecticon = 'star-o'
    }
    // 请求数据
    getDetailData({ proid }).then(res => {
      console.log(res)
      const { brand, desc, proname, rating, sales, price, oldprice, proimg, detail, type, stock } = res.data.data
      this.brand = brand
      this.desc = desc
      this.detail = '<mark style="color: #f66">' + detail + '</mark>'
      this.price = price
      this.oldprice = oldprice
      this.proid = proid
      this.proimg = proimg
      this.proname = proname
      this.rating = rating
      this.sales = sales
      this.stock = stock
      this.type = type
    })
  },
  methods: {
    chat () {
      console.log('chat...')
    },
    collect () {
      const arrStr = localStorage.getItem('collection') || '[]'
      const arr = JSON.parse(arrStr)
      const index = arr.indexOf(this.proid)
      if (index !== -1) {
        arr.splice(index, 1)
        this.collecticon = 'star-o'
      } else {
        arr.push(this.proid)
        this.collecticon = 'star'
      }
      localStorage.setItem('collection', JSON.stringify(arr))
    },
    addCart () {
      // 登陆
      addCart({
        userid: localStorage.getItem('userid'),
        proid: this.proid,
        num: 1
      }).then(res => {
        const { code } = res.data
        if (code === '200') {
          Toast('加入购物车成功')
        } else if (code === '10101') {
          Toast('加入失败')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background:#f4f4f4;
}
.detailBanner {
  position: relative;
  .goBack {
    position: absolute;
    top:10px;
    left:6px;
    width:50px;
  }
  .more {
    position: absolute;
    top:18px;
    right:18px;
    width:31px;
  }
}
.detailBox {
  background:white;
  overflow: hidden;
}
.price {
  h3 {
    color: #b60909;
    font-size: 30px;
    font-weight: bold;
    display: inline-block;
    margin-top: 20px;
    margin-left: 10px;
  }
  span {
    color: #999;
    text-decoration: line-through;
    font-size: 14px;
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;
  }
}
h1 {
  color: #333;
  font-size: 17px;
  margin-left: 10px;
  margin-top: 10px;
}
i {
  color: #333;
  font-size: 10px;
  width:94%;
  display: block;
  margin:14px auto;
}
</style>
